import React, { Component } from 'react'
import './index.css'
import { Button } from 'antd'
import { LogoutOutlined } from '@ant-design/icons'

export default class index extends Component {
    state = {
        // 窗口大小
        windowHeight: 0
    }

    componentDidMount() {
        this.setState({
            windowHeight: window.innerWidth / 6.5
        })
        window.addEventListener("resize", this.changeWidth)
        this.timer = setInterval(() => {
            this.getTime();
            this.forceUpdate();
        }, 1000)
    }

    componentWillUnmount() {
        window.removeEventListener("resize", this.changeWidth);
        clearInterval(this.timer);
    }

    // 获取时间
    getTime = () => {
        var date = new Date();
        var y = date.getFullYear();
        var m = date.getMonth();
        var d = date.getDate();
        var h = date.getHours();
        var min = date.getMinutes();
        var s = date.getSeconds();
        var weekends = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var info = y + "年" + m + "月" + d + "日 " + (h < 10 ? '0' + h : h) + ":" + (min < 10 ? '0' + min : min) + ":" + (s < 10 ? '0' + s : s) + " " + weekends[date.getDay()];
        this.msg = info;
    }

    // 改变窗口
    changeWidth = (e) => {
        const screenWidth = e.target.innerWidth;
        if (screenWidth <= 768) {
            this.setState({
                windowHeight: screenWidth / 6.5
            })
        } else if (screenWidth >= 1300) {
            this.setState({
                windowHeight: screenWidth / 6.5
            })
        } else if (768 < screenWidth < 1300) {
            this.setState({
                windowHeight: screenWidth / 6.5
            })
        }
    }

    render() {
        return (
            <div id="Title">
                <div className="container">
                    <span style={{ fontSize: `calc(${this.state.windowHeight}%)`, color: 'white', top: '10%', position: 'relative' }}>智慧变电站</span>
                    <Button type="primary" icon={<LogoutOutlined className="icon" style={{ fontSize: '20px' }} />} className="logout" title="退出看板"></Button>

                    <span ref={(node) => { this.timer = node; }} className="timer" style={{ float: 'right', right: '4%', color: 'white', fontSize: `calc(${this.state.windowHeight / 2}%)`, position: 'relative', top: '30%' }}>{this.msg}</span>
                </div>
            </div>
        )
    }
}
